import Phaser from "phaser"

import sky from '@/assets/sky.png'
import ground from '@/assets/platform.png'
import star from '@/assets/star.png'
import bomb from '@/assets/bomb.png'
import dude from '@/assets/dude.png'

export class MainScene extends Phaser.Scene {

  platforms!: Phaser.Physics.Arcade.StaticGroup

  player!: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody

  stars!: Phaser.Physics.Arcade.Group

  cursors!: Phaser.Types.Input.Keyboard.CursorKeys

  bombs!: Phaser.Physics.Arcade.Group

  score: number = 0
  scoreText!: Phaser.GameObjects.Text

  gameOver: boolean = false

  constructor() {
    super({
      key: 'Main'
    })
  }

  preload() {
    this.load.image('sky', sky)
    this.load.image('ground', ground)
    this.load.image('star', star)
    this.load.image('bomb', bomb)
    this.load.spritesheet('dude',
      dude,
      { frameWidth: 32, frameHeight: 48 }
    )
  }

  create() {
    this.add.image(400, 300, 'sky')

    this.platforms = this.physics.add.staticGroup()

    this.platforms.create(400, 568, 'ground').setScale(2).refreshBody()

    this.platforms.create(600, 400, 'ground')
    this.platforms.create(50, 250, 'ground')
    this.platforms.create(750, 220, 'ground')

    this.player = this.physics.add.sprite(100, 450, 'dude')

    this.player.setBounce(0.2)
    this.player.setCollideWorldBounds(true)

    this.anims.create({
      key: 'left',
      frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
      frameRate: 10,
      repeat: -1
    })

    this.anims.create({
      key: 'turn',
      frames: [{ key: 'dude', frame: 4 }],
      frameRate: 20
    })

    this.anims.create({
      key: 'right',
      frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
      frameRate: 10,
      repeat: -1
    })

    this.physics.add.collider(this.player, this.platforms)

    this.stars = this.physics.add.group({
      key: 'star',
      repeat: 11,
      setXY: { x: 12, y: 0, stepX: 70 }
    })
    
    
    this.stars.children.iterate((_star)=>{
      let star = _star as Phaser.Physics.Arcade.Sprite
      star.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8))
    })

    this.physics.add.collider(this.stars, this.platforms)

    this.cursors = this.input.keyboard.createCursorKeys()

    // Phaser.GameObjects.Sprite
    this.physics.add.overlap(this.player, this.stars, (_, _star ) => {
      let star = _star as Phaser.Physics.Arcade.Sprite
      star.disableBody(true, true)
      this.score += 10
      this.scoreText && this.scoreText.setText('Score: ' + this.score)

      if (this.stars.countActive(true) === 0) {
        this.stars.children.iterate( (_star) => {
          let star = _star as Phaser.Physics.Arcade.Sprite
          star.enableBody(true, star.x, 0, true, true)
        })

        var x = (this.player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400)

        var bomb = this.bombs.create(x, 16, 'bomb')
        bomb.setBounce(1)
        bomb.setCollideWorldBounds(true)
        bomb.setVelocity(Phaser.Math.Between(-200, 200), 20)

      }
    }, () => { }, this)

    this.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '32px', color: '#000' })

    this.bombs = this.physics.add.group()

    this.physics.add.collider(this.bombs, this.platforms)

    this.physics.add.collider(this.player, this.bombs, (_player, _) => {
      let player = _player as Phaser.Types.Physics.Arcade.SpriteWithDynamicBody
      this.physics.pause()
      player.setTint(0xff0000)
      player.anims.play('turn')
      this.gameOver = true
    }, () => { }, this)
  }

  update() {
    if (!this.cursors || !this.player) {
      return
    }

    if (this.cursors.left.isDown) {
      this.player.setVelocityX(-160)

      this.player.anims.play('left', true)
    }
    else if (this.cursors.right.isDown) {
      this.player.setVelocityX(160)

      this.player.anims.play('right', true)
    }
    else {
      this.player.setVelocityX(0)

      this.player.anims.play('turn')
    }

    // 检测是否按了“上”键, 并且玩家与地面接触了
    if (this.cursors.up.isDown && this.player.body.touching.down) {
      this.player.setVelocityY(-330)
    }
  }

}
